<template>
  <div class="pages stockinventoryDetails">
    <div class="pageLevel">
        <el-form  label-width="90px" class="demo-ruleForm" style="margin-top:20px;">
         <el-row>
             <el-col :span="6">
              <el-form-item label="盘点模式:" >
                <span>{{inventoryPattern}}</span>
               </el-form-item>
            </el-col>
             <el-col :span="6">
               <el-form-item label="盘点类型:">
                <span>{{inventoryType}}</span>
               </el-form-item>
            </el-col>
             <el-col :span="6">
               <el-form-item label="盘点仓库:" class="billdata">
                 <span>{{warehouseName}}</span>
               </el-form-item>
            </el-col>
           </el-row>
            <el-row>
             <el-col :span="6">
              <el-form-item label="盘点时间:" >
                <span>{{createTime}}</span>
               </el-form-item>
            </el-col>
             <el-col :span="6">
               <el-form-item label="操作员:">
                <span>{{userName}}</span>
               </el-form-item>
            </el-col>
           </el-row>
       <!-- 表格 -->
       <el-row>
          <el-form-item label="盘点情况:">
          </el-form-item>
      </el-row>
      <div class="tableMain">
          <el-table :data="completeGoodsList" stripe style="width: 100%">
                <el-table-column prop="goodsCode"  label="商品货号" align="center">
                </el-table-column>
                <el-table-column prop="barCode" label="商品条码" align="center">
                </el-table-column>
                <el-table-column prop="goodsName" label="商品名称" align="center">
                </el-table-column>
                <el-table-column prop="goodsSpec" label="规格型号" align="center">
                  <template slot-scope="scope">
                    <div v-for="(item, index) in  scope.row.goodsSpec" :key="index">
                      <span v-if="item!=null">{{item.paramName}} :</span>
                      <span v-if="item!=null">{{item.paramValue}} </span>
                    </div>
                  </template>
                 </el-table-column>
                 <!-- 集团订单新加功能5/31 -->
                <el-table-column prop="dateInProduced" label="生产日期" :formatter="dateInProduced" align="center" width="100"></el-table-column>
                 <el-table-column prop="goodsBatchNumber" label="商品批次" align="center">
                 </el-table-column>
                 <el-table-column prop="unitName" label="单位" align="center">
                 </el-table-column>
                 <el-table-column  v-if="type=='1'"  prop="skuNum" label="当前库存余额" align="center"></el-table-column>
                 <el-table-column  v-else-if="(status=='3'||setRole('审核通过'))&&showLook!='2'"    prop="skuNum" label="当前库存余额" align="center">  
                 <!-- <el-table-column  v-if="(status=='3'||setRole('审核通过'))&&(showLook!='2'||type=='1')"  prop="skuNum" label="当前库存余额" align="center"> -->
                 </el-table-column>
                 <el-table-column prop="goodsNum" align="center" label="盘点数量" width="150">
                  <template slot-scope="scope"> 
                    <input v-if="status=='4'&&setRole('驳回修改')&&showLook=='2'" class="input" v-model="scope.row.goodsNum" size="mini" type="text" style="width:100px" value="1" min="1" maxlength="6" oninput="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else if(this.value){this.value=parseInt(this.value.replace(/\D/g,''))}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                     <span v-else>{{scope.row.goodsNum}}</span>
                    </template>
                 </el-table-column>
                  <el-table-column  prop="profitAndLoss" label="盘点盈亏" align="center" v-if="type=='1'">
                  <!-- <el-table-column  prop="profitAndLoss" label="盘点盈亏" align="center" v-if="(status=='3'||setRole('审核通过'))&&showLook!='2'"> -->
                  <template slot-scope="scope">
                      <span v-if="scope.row.profitAndLoss>0" style="color:#00FA9A;">{{scope.row.profitAndLoss}}</span>
                      <span v-else-if="scope.row.profitAndLoss<0" style="color:red;">{{scope.row.profitAndLoss}}</span>
                      <span v-else>{{scope.row.profitAndLoss}}</span>
                   </template>
                 </el-table-column>
                 <el-table-column  prop="profitAndLoss" label="盘点盈亏" align="center" v-else-if="(status=='3'||setRole('审核通过'))&&showLook!='2'">
                  <!-- <el-table-column  prop="profitAndLoss" label="盘点盈亏" align="center" v-if="(status=='3'||setRole('审核通过'))&&showLook!='2'"> -->
                  <template slot-scope="scope">
                      <span v-if="scope.row.profitAndLoss>0" style="color:#00FA9A;">{{scope.row.profitAndLoss}}</span>
                      <span v-else-if="scope.row.profitAndLoss<0" style="color:red;">{{scope.row.profitAndLoss}}</span>
                      <span v-else>{{scope.row.profitAndLoss}}</span>
                   </template>
                 </el-table-column>
             </el-table> 
        </div>
        <el-row>
          <el-form-item label="盘点备注:" prop="listcontent" style="margin-top:30px;">
              <textarea v-if="status=='4'&&setRole('驳回修改')&&showLook=='2'" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" v-model="inventoryRemarks" placeholder="请输入备注" name="" id="" cols="10" rows="5" maxlength="100" style="width:450px;resize:none">
              </textarea>
              <span v-else>{{inventoryRemarks}}</span>
           </el-form-item>
        </el-row>
         <el-row>
          <el-form-item label="审核备注:" prop="auditRemark" >
              <span>{{auditRemark}}</span>
           </el-form-item>
        </el-row>
      <!-- 提交 -->
       <div class="buttonstyle">
           <el-button  v-if="status=='2'&&setRole('审核驳回')" size="small" style="margin-top: 12px;background-color:#FF44AA;color:#fff"  @click="rejectDialog=true">驳回</el-button>
           <el-button size="small" style="margin-top: 12px;"  @click="cancel">返回</el-button>
           <el-button  v-if="status=='2'&&setRole('审核通过')" type="primary" size="small"  style="margin-top: 12px;"   @click="passDialog=true">通过</el-button>
           <el-button  v-if="status=='4'&&setRole('驳回修改')&&showLook=='2'" type="primary" size="small"  style="margin-top: 12px;"   @click="submission">提交</el-button>
       </div>
       </el-form>
       <!-- 驳回 弹窗-->
       <el-dialog title="请输入驳回原因："  :visible.sync="rejectDialog" :closeOnClickModal='false' :closeOnPressEscape='false' width="25%">
             <textarea onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" v-model="dismissal" placeholder="" name="" id="" cols="7" rows="5" maxlength="100" style="width:280px;resize:none;margin-left:20px;">
             </textarea>
             <div style="text-align:center">
               <el-button size="small" style="margin-top: 12px;"  @click="rejectDialog=false">取消</el-button>
               <el-button size="small"  style="margin-top: 12px;background-color:#FF44AA;color:#fff"   @click="confirmRejected">确认驳回</el-button>
             </div>
       </el-dialog>
         <!-- 通过 弹窗-->
       <el-dialog title="确认通过此盘点单吗？"  :visible.sync="passDialog" :closeOnClickModal='false' :closeOnPressEscape='false' width="25%">
             <div class="passText">通过后库存数据将会进行对应调整</div>
             <span class="passText-b">盘点总结：</span>
             <textarea onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" v-model="passValue" placeholder="" name="" id="" cols="7" rows="5" maxlength="100" style="width:280px;resize:none;margin-left:20px;">
             </textarea>
             <div style="text-align:center">
               <el-button size="small" style="margin-top: 12px;"  @click="passDialog=false">取消</el-button>
               <el-button size="small"  style="margin-top: 12px;background-color:#FF44AA;color:#fff"   @click="confirmPass">确认通过</el-button>
             </div>
       </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from '@/util'
import { inventoryDetails,updateInventoryStatus,inventoryGoodsNum } from "@/api";
export default {
  computed: mapState([, "merchantId","power"]),
  data() {
    return {
      completeGoodsList:[],//商品列表
      status:"",//盘点状态
      rejectDialog:false,//驳回弹窗
      dismissal:"",//驳回原因
      passDialog:false,//通过弹窗
      passValue:"",//通过内容
      type:"",//盘点属于名盘还是盲盘
      inventoryType:"",//盘点类型
      warehouseName:"",//仓库名称
      iventoryStatus:"",//单据状态
      inventoryPattern:"",//盘点模式
      inventoryRemarks:"",//盘点备注
      userName:"",//操作员
      auditRemark:"",//审核备注
      createTime:"",//盘点时间
      showLook:"",//审核驳回是否是审核人员
      
    };
  },
 created() {
    this.status = util.getQuery('status');
    this.type = util.getQuery('type');
    this.showLook = util.getQuery('showLook');
    
  },
  mounted() {
    this.inventoryList()
  },
  methods: {
      //配置权限
     setRole (key) {
      return util.selectTitle(this.power, key)
     },
      //转时间戳
     dateInProduced(row, column) {
      return util.foryear(row.dateInProduced)
     },
         // 盘点单详情
    inventoryList() {
      inventoryDetails({
        id:util.getQuery('id'),
      }).then(res => {
        if(res.data.inventoryPattern=="0"){
          this.inventoryPattern="盲盘"
        }else if(res.data.inventoryPattern=="1"){
          this.inventoryPattern="明盘"
        }
        if(res.data.inventoryType=="0"){
          this.inventoryType="日盘"
        }else if(res.data.inventoryType=="1"){
          this.inventoryType="周盘"
        }else{
          this.inventoryType="月盘"
        }
        this.warehouseName=res.data.warehouseName;
        this.userName=res.data.userName;
        this.inventoryRemarks=res.data.inventoryRemark;
        this.auditRemark=res.data.auditRemark;
        this.createTime=res.data.createTime;
        this.createTime=util.foryear(this.createTime)+ " " + util.fortime(this.createTime)
        this.completeGoodsList = res.data.goodsList;
      });
    },
    // 取消
    cancel(){
       history.back();
    },
    // 提交
    submission(){
        let goodsList = this.completeGoodsList.map(function(item) {
        return {
          id: item.id,
          goodsNum: item.goodsNum,
          skuNum: item.skuNum,
        };
       });
       inventoryGoodsNum({  
        goodsList:JSON.stringify(goodsList),
        inventoryId:util.getQuery('id'),
        inventoryRemark:this.inventoryRemarks,
        inventoryStatus:'2',
      }).then(res=>{
          if(res.code==200){
            history.back();
          }
      })
    },
    // 确认驳回
    confirmRejected(){
        if(this.dismissal==""){
             this.$message({
             type: "error",
             message: "请填写驳回原因!"
           }); 
        }else{
          updateInventoryStatus({
            id:util.getQuery('id'),
            inventoryStatus:"4",
            auditRemark:this.dismissal
         }).then(res=>{
          if(res.code==200){
            this.rejectDialog=false
            history.back();
          }
       })
        }
    },
    // 确认通过
    confirmPass(){
      updateInventoryStatus({
         id:util.getQuery('id'),
         inventoryStatus:"3",
         auditRemark:this.passValue
       }).then(res=>{
          if(res.code==200){
          this.passDialog=false
           history.back();
          }
       })
      
    }

  }
};
</script>
<style scoped>
.buttonstyle{
    width:80%;
    text-align: right;
    margin-top:100px;
}
.buttonstyle button{
   margin-left:30px;
}
.billdata .el-date-editor .el-range__close-icon {
    display: none;
}
.passText{
    /* margin-top:-38px; */
    margin-bottom:10px;
    line-height: 24px;
    font-size: 18px;
    color: #303133;
}
.passText-b{
    font-size:16px;
    display: inline-block;
    margin-bottom:10px;
}
</style>
